<template>
    <div>
      <div class="toolbar">
        <el-button type="primary" @click="showDetail('create')">新增</el-button>
      </div>
      <el-table :data="roles" v-loading="loading"
                highlight-current-row>
        <el-table-column prop="roleName" label="角色名称" width="180" align="center"></el-table-column>
        <el-table-column prop="roleCode" label="角色代码" width="180" align="center"></el-table-column>
        <el-table-column prop="description" label="描述" align="center" :formatter="descriptionFormat"></el-table-column>
        <el-table-column prop="isdelete" label="状态" width="180" align="center" :formatter="statusFormat">
        </el-table-column>
        <el-table-column label="操作" width="150" inline-template align="center">
          <template>
            <el-button @click="showDetail(row.pkid)" type="text" size="small">查看详情</el-button>
            <el-button @click="doAuthorization(row)" type="text" size="small">授权</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
</template>
<style scoped>
  .page{
    text-align: right;
    margin: 10px 0px;
  }
</style>
<style>
  .toolbar{
    padding: 10px;
  }
</style>
<script>
  import roleApi from '../../../api/sys/roleApi'

  export default {
    data () {
      return {
        roles: [],
        loading: false
      }
    },
    created () {
      this.loading = true
      roleApi.getRoles().then((resp) => {
        this.roles = resp.body.data
        this.loading = false
      })
    },
    methods: {
      showDetail: function (id) {
        this.$router.push({name: 'm-r-d', params: {id: id}})
      },
      descriptionFormat (row, column) {
        if (!row.description) return ''
        if (row.description.length > 5) {
          return row.description.substr(0, 5) + '...'
        } else {
          return row.description
        }
      },
      statusFormat (row, column) {
        if (row.isdelete === '0') {
          return '删除'
        } else if (row.isdelete === '1') {
          return '可用'
        }
      },
      doAuthorization (role) {
        this.$router.push({name: 'm-r-d-a', params: {id: role.pkid, name: role.roleName}})
      }
    }
  }
</script>
